<template>
  <div class="seach-box" :style="{ background: store.styleInfo.auxiliaryColor }">
    <t-row :gutter="32">
      <t-col :span="4">
        <div class="seach-item">
          <span class="seach-title">类型</span>
          <div class="seach-item-box">
            <t-select v-model="parmas.typeId" placeholder="请选择展品类型">
              <t-option v-for="item in datas.select3" :key="item.id" :label="item.text" :value="item.id" />
            </t-select>
          </div>
          <!-- <t-option v-for="item in options2" :key="item.value" :value="item.value" :label="item.label"></t-option> -->
        </div>
      </t-col>
      <t-col :span="4">
        <div class="seach-item">
          <span class="seach-title">年代</span>
          <div class="seach-item-box">
            <t-cascader
              v-model="parmas.ageId"
              :options="datas.select4"
              valueType="full"
              :keys="{
                value: 'id',
                children: 'children',
                label: 'text',
              }"
              clearable
            />
          </div>
        </div>
      </t-col>
      <t-col :span="4">
        <div class="seach-item">
          <span class="seach-title">名称</span>
          <div class="input-box seach-item-box">
            <div class="input-box-left">
              <t-input @enter="seachValue" v-model="value" style="width: 100%"> </t-input>
            </div>
            <button
              @click="seachValue"
              class="button-style"
              :style="{ background: store.styleInfo.themeColor, color: '#fff', fontSize: store.styleInfo.fontSize }"
            >
              搜索
            </button>
          </div>
        </div>
      </t-col>
      <t-col :span="12">
        <div class="seach-item">
          <span class="seach-title">单元</span>
          <div class="seach-item-box seach-item-box-tab">
            <span
              @click="parmas.ModuleId = item.id"
              v-for="item in datas.moduleList"
              :key="item.id"
              class="tab-item"
              :style="{
                color: parmas.ModuleId == item.id ? store.styleInfo.themeColor : '#999999',
              }"
              >{{ item.name }}</span
            >
          </div>
        </div>
      </t-col>
      <t-col :span="12">
        <div class="seach-item">
          <span class="seach-title">单位</span>
          <div class="seach-item-box seach-item-box-tab">
            <span
              @click="parmas.CompanyId = item.id"
              v-for="item in datas.company"
              :key="item.id"
              class="tab-item"
              :style="{
                color: parmas.CompanyId == item.id ? store.styleInfo.themeColor : '#999999',
              }"
              >{{ item.name }}</span
            >
          </div>
        </div>
      </t-col>
      <t-col :span="12">
        <div class="seach-item">
          <span class="seach-title seach-item-box-tab">级别</span>
          <div class="seach-item-box seach-item-box-tab">
            <span
              @click="parmas.levelId = item.id"
              v-for="item in datas.select1"
              :key="item.id"
              class="tab-item"
              :style="{
                color: parmas.levelId == item.id ? store.styleInfo.themeColor : '#999999',
              }"
              >{{ item.text }}</span
            >
          </div>
        </div>
      </t-col>
      <t-col :span="12">
        <button
          @click="clear"
          class="button-style1"
          :style="{
            borderColor: store.styleInfo.themeColor,
            color: store.styleInfo.themeColor,
            fontSize: store.styleInfo.fontSize,
          }"
        >
          清空条件
        </button>
      </t-col>
    </t-row>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { companysData, modulesData } from '@/api/templates/templates';
import { reactive, ref, watch } from 'vue';
import { treeList } from '@/api/user/user';
import { useProjectStore } from '@/store';

const emit = defineEmits('seachInfo');
const value = ref('');
const datas = reactive({
  select1: [], //级别
  select2: [], //来源
  select3: [], //类型
  select4: [], //年代
  company: [], //单位
  moduleList: [], //单元
});
const parmas = ref({
  value: '',
  typeId: null,
  ageId: 0,
  levelId: 0,
  ModuleId: 1,
  CompanyId: -1,
});

const seachValue = () => {
  parmas.value.value = value.value;
};
const initSelect = async () => {
  //初始化所有下拉选项

  let res2 = await treeList(371999507447877); //类型
  let res3 = await treeList(372051821408325); //年代

  // datas.select2 = res1.data;
  datas.select3 = res2.data;
  datas.select4 = res3.data;
};
const initInfo = async () => {
  let { data } = await companysData(localStorage.getItem('projectId'));
  let DataList = await modulesData(localStorage.getItem('projectId'));
  let res = await treeList(371994471206981); //级别
  datas.select1 = res.data;
  datas.moduleList = DataList.data;
  datas.company = data;
};
initInfo();
initSelect();
const store = useProjectStore();

const clear = () => {
  parmas.value.value = '';
  parmas.value.typeId = null;
  parmas.value.ageId = 0;
  parmas.value.levelId = 0;
  parmas.value.ModuleId = 1;
  parmas.value.CompanyId = -1;
  value.value = '';
  // emit('seachInfo', parmas.value);
};
watch(
  parmas.value,
  () => {
    emit('seachInfo', parmas.value);
  },
  { deep: true },
);
</script>

<style lang="less" scoped>
.seach-box {
  width: 100%;
  padding: 46px;
  margin-top: 50px;
}
.input-box {
  display: flex;
  .input-box-left {
    max-height: 80%;
    width: 80%;
  }
  :deep(.t-input) {
    padding-right: 0;
  }
}
.seach-item-box {
  flex: 1;
}
.seach-item {
  display: flex;
  width: 100%;
}
.seach-title {
  width: 36px;
  font-size: 18px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: bold;
  color: #333333;
  line-height: 28px;
  margin-right: 24px;
}
.seach-item-box-tab {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.tab-item {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 28px;
  margin-right: 24px;
  cursor: pointer;
}
.tab-item-active {
  color: #cfbda8;
}
.t-col {
  margin-bottom: 18px;
}
.button-style {
  cursor: pointer;
  height: 100%;
  width: 20%;
  height: 32px;
  border: none;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 24px;
  border-radius: 4px;
}
.button-style1 {
  cursor: pointer;
  width: 92px;
  height: 40px;
  background: #ffffff;
  // outline: none;
  border: 1px solid #cfbda8;
}
</style>
